<template>
	<view class="content">
		<text class="title">积分兑换代扔券</text>
		<view class="ticket">
			<!-- 左边：图片-->
			<image class="left" src="../../../static/zhekou2.jpg" mode="widthFix"></image>
			<!-- 右边内容 -->
			<view class="right">
				<!-- <view class=""> -->
				<text style="font-weight: bold;">4.9元生活垃圾待扔券2张(限3kg以内)</text>
				<text class="cusPoints">消耗积分：100积分</text>
				<!-- </view> -->
				
				<view class="numOfBuy">
					<view class="buy">
						<text class="num">限量1000份</text>
						<text>234人已购买</text>
					</view>
					<text class="sale" @click="sales">立即兑换</text>
				</view>
			</view>
		</view>
		
		<view class="ticket">
			<!-- 左边：图片-->
			<image class="left" src="../../../static/zhekou1.jpg" mode="widthFix"></image>
			<!-- 右边内容 -->
			<view class="right">
				<text style="font-weight: bold;">9.9元生活垃圾待扔券3张(不限次数)</text>
				<text class="cusPoints">消耗积分：100积分</text>
				<view class="numOfBuy">
					<view class="buy">
						<text class="num">限量1000份</text>
						<text>234人已购买</text>
					</view>
					<text class="sale" @click="sales">立即兑换</text>
				</view>
			</view>
		</view>	
		
	</view> 
</template>

<script>
import findingApi from '../../../common/FindingService/FindingApi'
	export default {
		data() {
			return {
				throwCoil:[]
			}
		},
		mounted(){
			this.queryThrowCoil()
		},
		methods: {
			sales(){
				// 如果向后台返回数据成功，积分数据修改，则兑换成功
				uni.showToast({
					title:'兑换成功',
				})
			},
			// 加载代扔券
			queryThrowCoil(){
				findingApi.queryThrowCoil().then(res=>{
					console.log('查询代扔券：',res)
					// this.throwCoil=res.data
				})
			}
		}
	}
</script>

<style lang="scss">
.content{
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	.title{
		width: 100%;
		font-weight: bold;
		font-size: 1.3em;
		margin: $uni-spacing-col-lg 0 0 $uni-spacing-row-base;
	}
	.ticket{
		display: flex;
		margin: $uni-spacing-col-lg 0 0 $uni-spacing-row-base;
		.left{
			width: 200rpx;
			
		}
		.right{
			display: flex;
			flex-direction: column;
			justify-content: space-around;
			margin: 0 $uni-spacing-row-lg;
			.cusPoints{
				color: $uni-color-error;
			}
			.numOfBuy{
				display: flex;
				justify-content: space-between;
				align-items: center;
				.buy{
					display: flex;
					flex-direction: column;
					.num{
						color:$uni-color-success;
						border: 1px solid $uni-color-success;
						border-radius: $uni-border-radius-lg;
						margin-bottom: $uni-spacing-col-sm;
					}
				}
				.sale{
					background-color: #36ab60;
					border-radius: $uni-border-radius-lg;
					padding: $uni-spacing-col-sm;
				}
				
			}
		}
	}
}
</style>
